<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>修改客户</span>
      </div>
      <el-form  :model="Customer" :rules="rules" ref="Customer" label-width="100px" class="demo-ruleForm">
        <el-row :gutter="20">
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="编号" prop="code" >
              <el-input v-model="Customer.code" disabled="disabled"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple">
          </div>
            <el-form-item label="客户名称" prop="name">
              <el-input v-model="Customer.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="发票类型" prop="invoiceType">
              <el-select v-model="Customer.invoiceType" placeholder="请选择" clearable>
                <el-option label="普通发票"   :value="1"></el-option>
                <el-option label="增值税发票"   :value="2"></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple">
          </div>
            <el-form-item label="发票抬头" prop="invoiceTitle">
              <el-input v-model="Customer.invoiceTitle"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="税号" prop="invoiceNum">
              <el-input v-model="Customer.invoiceNum" ></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple">
          </div>
            <el-form-item label="税率" prop="taxRate">
              <el-input v-model="Customer.taxRate"></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="20">
          <el-col :span="12"><div class="grid-content bg-purple">
          </div>
            <el-form-item label="地址" prop="address">
              <el-input v-model="Customer.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="所属行业" prop="industry">
              <el-select v-model="Customer.industry" placeholder="请选择" clearable>
                <el-option label="机械制造"   :value="0"></el-option>
                <el-option label="房地产"   :value="1"></el-option>
                <el-option label="金融"   :value="2"></el-option>
                <el-option label="教育"   :value="3"></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
        </el-row>


        <el-row :gutter="20">
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="首次合作" prop="cooperDate">
              <el-date-picker
                v-model="Customer.cooperDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple">
          </div>
            <el-form-item label="描述" prop="remarks">
              <el-input  type="textarea" v-model="Customer.remarks"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button type="primary" @click="save('Customer')">保存</el-button>
        <el-button  @click=" resetForm('Customer')">重置</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
    export default {
        name: "addCust",
      data(){
          return{
            Customer:{code:""},
            rules:{
              name: [
                { required: true, message: '请输入名称', trigger: 'blur' },
              ],
              invoiceType: [
                { required: true, message: '请选择发票类型', trigger: 'change' }
              ],
              invoiceNum: [
                { required: true, message: '请输入税号', trigger: 'blur' },
              ],
              taxRate: [
                { required: true, message: '请输入税率', trigger: 'blur' },
              ],
             address: [
                { required: true, message: '请输入地址', trigger: 'blur' },
              ],
              industry: [
                { required: true, message: '请选择发票类型', trigger: 'change' }
              ],
              remarks: [
                { required: true, message: '请输入描述', trigger: 'blur' },
              ],
              cooperDate: [
                { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
              ],
            }
          }

      },
      methods:{
        save(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$http.post("customer/save",this.Customer).then((res)=>{
                this.$message(res.data.message);
              })
              this.$router.push("/customerList");
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        find(id){
          this.$http.get("customer/find/"+id).then((res)=>{
            this.Customer=res.data.result;
          })
        }
      },
      mounted() {
      var id=this.$route.query.id;
      this.find(id);
    }

    }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 800px;
  }
</style>
